<template>
  <div id="biji">
    <van-nav-bar title="笔记" />
    <div class="button-group">
      <van-button size="small" type="primary" @click="onSearch('1')">
        普通
      </van-button>
      <van-button size="small" type="danger" @click="onSearch('2')">
        重要
      </van-button>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-swipe-cell v-for="item in notes.items" v-bind:key="item.id">
        <!-- <template #left>
        <van-button square type="primary" text="选择" />
      </template> -->
        <van-cell
          :border="false"
          right-width="100px"
          :to="item.isLink == true ? '/biji/' + item.id : '/biji'"
          :title="item.data"
          :is-link="item.isLink"
          :value="item.time"
        />
        <template #right>
          <van-button square type="danger" text="修改" />
          <van-button square type="primary" text="删除" />
        </template>
      </van-swipe-cell>
    </van-list>
    <van-button
      class="pb"
      :round="true"
      icon="plus"
      type="warning"
      @click="openText"
    />
    <van-popup
      style="width: 100%"
      v-model="popupVisible"
      position="bottom"
      closeable
    >
      <van-radio-group
        style="margin:left:15px;"
        v-model="addType"
        direction="horizontal"
      >
        <van-radio name="1" checked-color="#ee0a24">普通</van-radio>
        <van-radio name="2" checked-color="#ee0a24">重要</van-radio>
      </van-radio-group>
      <van-field
        placeholder="记事内容"
        type="textarea"
        v-model="content"
        rows="6"
      ></van-field>
      <van-button type="primary" size="large" @click="save">保存</van-button>
    </van-popup>
  </div>
</template>
<script>
// 枚举
var enumAddType = {
  普通: 1,
  重要: 2,
};
export default {
  name: "BiJi",
  components: {},
  data() {
    return {
      // 弹窗
      popupVisible: false,
      // 添加类型
      addType: "1",
      // 选项
      active: "tab-ordinary",
      // 添加数据
      content: "",
      // 服务端数据
      totalCount: 0,
      notes: {
        totalCount: 0,
        items: [],
      },
      loading: false,
      finished: false,
      searchs: {
        type: 1,
        skipCount: 0,
        maxResultCount: 10,
      },
    };
  },
  methods: {
    onSearch(e) {
      this.finished = false;
      this.loading = true;
      this.searchs.skipCount = 0;
      this.searchs.type = e;
      this.notes = {
        totalCount: 0,
        items: [],
      };
      if (e == 1) {
        this.active = "tab-ordinary";
      } else {
        this.active = "tab-important";
      }
      this.onLoad();
    },
    deleteData(id) {
      this.$messagebox(id);
    },
    updateData(item) {
      this.content = item.data;
      this.openText(item.type);
    },
    loadMore() {
      this.loading = true;
      // 在特定的情况下修改为false
      // this.loading = false;
    },
    openText() {
      this.popupVisible = true;
    },
    save() {
      // 当前添加类型
      // alert(this.addType);
      // // 当前添加数据
      // alert(this.content);
      // 保存时,计算文字个数,在标题中添加省略...
      this.popupVisible = false;
      this.$api.post(
        "api1",
        "app/note",
        {
          content: this.content,
          noteType: this.addType,
        },
        (r) => {
          this.content = "";
          this.onSearch(this.addType);
        }
      );
    },
    onLoad() {
      this.$api.get(
        "api1",
        `app/note?noteType=${this.searchs.type}&skipCount=${this.searchs.skipCount}&maxResultCount=${this.searchs.maxResultCount}`,
        null,
        (r) => {
          this.totalCount = r.totalCount;
          for (let item of r.items) {
            this.notes.items.push({
              data: item.content,
              id: item.id,
              time: item.creationTime,
              isLink: item.totalCount > 18,
            });
          }
          this.searchs.skipCount =
            this.searchs.skipCount + this.searchs.maxResultCount + 1;
          this.loading = false;
          if (r.totalCount <= this.searchs.skipCount) this.finished = true;
        }
      );
    },
  },
  mounted() {
    // this.init();
  },
};
</script>
<style lang="stylus" scoped>
.button-group {
  padding: 3px;
}
</style>
<style>
.pb {
  color: #fff;
  position: fixed;
  bottom: 75px;
  right: 15px;
}

.mint-main-button {
  color: #000;
  background-color: #26a2ff;
}

.mint-cell-label {
  font-size: 15px;
}
</style>